﻿@page "/chart/bar"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart'>Blazor Bar Chart</a> example visualizes the data about UK trade in food groups of the year 2015 with default bar series in the chart. Data points values are showed by using data label.</p>
</SampleDescription>
<ActionDescription>
    <p>
        In this example, you can see how to render and configure the bar type chart. The bar type chart is similar to the column chart, but the orientation of the y-axis is horizontal rather than vertical. <code>DataLabel</code> is used to represent individual data and its value.
    </p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the bar series can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-types/bar'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="UK Trade in Food Products - 2015" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Title="Food">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis LabelFormat="{value}B" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisLabelStyle Color="transparent"></ChartAxisLabelStyle>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryYAxis>
        <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" XName="Food" YName="ImportTrade" Name="Imports" Width="2" Type="ChartSeriesType.Bar">
                <ChartMarker>
                    <ChartDataLabel Visible="true" Position="LabelPosition.Top">
                        <ChartDataLabelFont FontWeight="600" Color="#ffffff"></ChartDataLabelFont>
                    </ChartDataLabel>
                </ChartMarker>
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" XName="Food" YName="ExportTrade" Name="Exports" Width="2" Type="ChartSeriesType.Bar">
                <ChartMarker>
                    <ChartDataLabel Visible="true" Position="LabelPosition.Top">
                        <ChartDataLabelFont FontWeight="600" Color="#ffffff"></ChartDataLabelFont>
                    </ChartDataLabel>
                </ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<BarChartData> ChartPoints { get; set; } = new List<BarChartData>
    {
        new BarChartData { Food = "Egg",  ImportTrade = 2.2 , ExportTrade = 1.2 },
        new BarChartData { Food = "Fish", ImportTrade = 2.4 , ExportTrade = 1.3 },
        new BarChartData { Food = "Misc", ImportTrade = 3.0 , ExportTrade = 1.5 },
        new BarChartData { Food = "Tea",  ImportTrade = 3.1 , ExportTrade = 2.2 }
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class BarChartData
    {
        public string Food { get; set; }
        public double ImportTrade { get; set; }
        public double ExportTrade { get; set; }
    }
}
